/* CSS for ScrubsOnCall\ScrubsOnline */
/*   default color:   socsol blue #0f6bb5;
     primary color:   ?socsol blue #0f6bb5;
     secondary color: socsol black #000;
     alt color dark:  navy navy;
     alt color light: white #FFF;
     highlight color: aqua aqua;
*/


  :root{
    --primary: #0f6bb5;
    --secondary: #000;
    --altdark: navy;
    --altlight: #FFF;
    --highlight: aqua;
    --bg-color: #FFF;
    /*--bg-image: url("Images\\SargNet_background.png");
    --bg-video: url("Video\\SargNet_background.mp4");*/
    --overlay-bg: rgba(0,0,0,0.35); /* panel overlay color */
    --bar-bg: rgba(255,255,255,0.08); /* header/footer bar background (mostly transparent) */
    --glass-border: rgba(255,255,255,0.12);
    --gap: 12px;
    --safe-pad: 16px;
  }

  /* Reset */
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}

  body{
    min-height:100vh;
    font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1.5rem;
    font-weight: normal;
    color: var(--altlight);
    letter-spacing: .03em;
    background: center/cover no-repeat var(--bg-image);
    position:relative;
	background-size: auto;
  }
  body.clientspartners {
	  background: var(--secondary);
  }
  body.about {
	  background: var(--secondary);
  }
  body.services {
	  background: var(--secondary);
  }
  body.contact {
	  background: var(--secondary);
  }
  body.why {
	  /*--bg-image: url("\SargNet_bg4.png");*/
	  background: var(--secondary);
  }
  
  body strong {
	font-weight: 500;
  }
  
	.sound-button {
		position: relative;
		bottom: 20%;
		right: 2%;
		background-color: rgba(0, 0, 0, 0.6);
		color: white;
		border: none;
		padding: 10px 16px;
		border-radius: 5px;
		cursor: pointer;
		z-index: 10;
		transition: background 0.3s ease;
	}

  /* optional dark overlay over image for contrast */
  body::before{
    content:"";
    position:fixed;
    inset:0;
	background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.45));
    z-index:0;
    pointer-events:none;
  }
  
  body[class] {
	  background-size: cover;
	  background: center / cover repeat var(--bg-image);
  }
  
	.logo {
	  width: 500px;
	  height: 150px;
	}
	 
	.logo-globe {
	  display: inline-block;
	  width: 40%;
	  height: 150px;
	  background-size: contain;
	  background-repeat: no-repeat;
	  background-position: left center;
	  background-image: url('Images/SargNet-Logo-Globe.png');
	}
	 
	.logo-text {
	  display: inline-block;
	  width: 40%;
	  height: 150px;
	  background-size: contain;
	  background-repeat: no-repeat;
	  background-position: left center;
	  background-image: url('Images/SargNet-Logo-Text.png');
	}
  
  .bg-video {
	  position:fixed;
	  top:0;
	  left:0;
	  width:100vw;
	  height:100vh;
	  object-fit:fill;
	  z-index:-2;
	  background:var(--secondary);
  }

  /* header & footer bars (fixed, full width) */
  .bar {
    position:fixed;
    left:0;
    right:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--gap);
    padding: calc(var(--safe-pad)) ;
    backdrop-filter: blur(10px) saturate(0%);
    /*background: var(--bar-bg);*/
    border-bottom: 1px solid transparent;
    z-index: 40;
    overflow:hidden;
  }
  
  body[class] .bar {
     background: var(--secondary);
  }
  
  header.bar{
    min-height: 15%;
    max-height: 17%;
    top:0;
    border-bottom-color: var(--glass-border);
  }
  
  footer.bar{
    bottom:0;
    border-top: 1px solid transparent;
    border-top-color: var(--glass-border);
    max-height: 8%;
  }

  /* inner row of 3 divs */
  .bar .slot-row{
    display:flex;
    width:100%;
    max-width:1200px;
    margin: 0 auto;
    gap: var(--gap);
    align-items:center;
    justify-content:space-between;
	min-height: -webkit-fill-available;
  }
  .bar .slot{
    min-width: 0;
    padding:8px 12px;
    text-align:center;
    border-radius:10px;
    transition: transform .18s ease, background .18s ease;
    cursor: default;
    user-select:none;
  }
  
  .bar .slot.center {
    text-align:center;
  }
  
  a,
  button {
	background: var(--altlight);
	color: var(--primary);
	text-decoration: none;
	cursor: pointer;
	pointer-events: auto;
  }
  
  header a {
    background: unset;
	color: aliceblue;
  }
  
  a:hover,
  button:hover {
    background: var(--primary);
    color: var(--altlight);
    text-decoration: none;
  }
  
  header a:hover {
    background: unset;
    color: #fff !important;
  }
  
  header a.active {
    background: unset;
    color: var(--highlight) !important;
    font-weight: 500;
  }
  
  #h-center {
	width: auto;
	min-width: 60%;
	background: transparent;
	color: var(--altlight);
	position: relative;
  }
  
  #h-left, #h-right {
    width: 30%;
    min-height: 160px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0;
    margin: 0;
    cursor: pointer;
  }

  /* main overlay container sits above background, centered */
  .main-overlay{
    height: 100%;
    width: 100%;
    position: fixed;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index: 30;
    /* pointer-events: none; /* allow specific children to accept clicks while container itself won't block things */
    pointer-events: auto;
  }
  
  body[class] .main-overlay {
    position: relative !important;
    display: block !important;
  }

  /* two panels side-by-side */
  .panels{
    width: 100%;
    display:flex;
    gap: 10px;
    pointer-events: auto; /* allow clicks inside */
	height: 100%;
  }

  a.panel{
    display:block;
    flex:1 1 0;
    border-radius: 14px;
    overflow:hidden;
    position:relative;
    text-decoration:none;
    color:inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.15));
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 8px 30px rgba(0,0,0,0.45);
    transition: transform .18s ease, box-shadow .18s ease;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  
  a.panel:hover{
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 18px 45px rgba(0,0,0,0.6);
	color: var(--primary);
  }
  
  a.panel:hover > .inner {
	background: var(--altlight);
	opacity: 50%;
  }
  
  a.panel.emp-pnl:hover > .inner {
	background: var(--primary);
	color: var(--altlight);
	opacity: 50%;
  }
  a.panel.client-pnl:hover > .inner {
	background: var(--secondary);
	color: var(--altlight);
	opacity: 50%;
  }

  /* content inside each panel */
  .panel .inner {
    padding: 28px;
    width:100%;
    text-align:center;
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:center;
    justify-content:center;
    pointer-events:none; /* inner content shouldn't intercept link clicks */
  }
  
  .panel h2{
    margin:0;
    font-size: clamp(30px, 2.4vw, 45px);
    font-weight:600;
    letter-spacing:0.2px;
  }
  
  .panel p{
    margin:0;
    font-size: clamp(15px, 1.4vw, 20px);
    opacity:0.9;
  }

  /* optional overlay icon/faint background within panel */
  .panel::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.25));
    mix-blend-mode: multiply;
    pointer-events:none;
  }

  a.panel:focus{
    outline: 3px solid rgba(255,255,255,0.14);
    outline-offset: 4px;
  }
  
	.hamburger,
	.menu {
	  display: none;
	}

	.menu {
	  position: relative;
	  left: 50%;
	  transform: translateX(-50%);
	  background: transparent;
	  backdrop-filter: blur(10px);
	  border-radius: 12px;
	  padding: 14px 0;
	  border: none;
	  display: block;
	  flex-direction: column;
	  min-width: 160px;
	  box-shadow: none;
	  z-index: 300;
	}

	.menu a {
	  padding: 10px 10px;
	  color: var(--altlight);
	  text-decoration: none;
	  white-space: nowrap;
	  transition: background .2s ease;
	  font-size: 1.2rem;
	}

	.menu a:hover {
	  background: rgba(255,255,255,0.1);
	  border-radius: 8px;
	}
	
	.main {
		height: 100%;
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 30;
		pointer-events: none;
		margin-right: auto;
		margin-left: auto;
	}
	
	 body[class] .main {
		 display: block;
	 }
	
	.logo-grid {
	   position: relative;
	   display: grid;
	   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	   gap: 2rem;
	   max-width: 100%;
	   min-height: 100%;
	   margin: 0 auto;
	   background-size: cover;
	   background-repeat: no-repeat;
	   background-position: left center;
	   background-image: url(Images/SargTigerFur-Dark.jpg);
	   background-color: rgba(202, 250, 254, 0.7) !important;
	   background-blend-mode: lighten;
	}
	
	.content-section {
	   position: relative;
	   display: block;
	   max-width: 100%;
	   min-height: 100%;
	   margin: 0 auto;
	   padding: 10% 10%;
	   padding-bottom: 20%;
	   background-size: cover;
	   background-repeat: no-repeat;
	   background-position: left center;
	   background-image: url(Images/SargTigerFur-Dark.jpg);
	   background-color: rgba(202, 250, 254, 0.7) !important;
	   background-blend-mode: lighten;
	   font-size: 1.5rem;
	}
	
	.content-section form {
		font-size:1.1rem;
		color: black;
	}
	
	.content-section form div {
		margin: 1rem 0rem;
	}
	
	.content-section form div label {
		color: var(--altdark);
	}
	
	.content-section .full-width {
		width: 100%;
	}
	.content-section .half-width {
		width: 49%;
		margin-right: 1%;
		float: left;
		clear: right;
	}
	.content-section .quarter-width {
		width: 25%;
		margin-right: 1%;
		float: left;
		clear: right;
	}
	
	.content-section.tab-0 {
		display: block;
		width: 100%;
		height: 1%;
	}
	.content-section.tab-1 {
		display: none;
		width: 100%;
		height: 100%;
	}
	.content-section.tab-1.active {
		display: block;
		width: 100%;
		height: 100%;
	}
	.content-section.tab-2 {
		display: none;
		width: 100%;
		height: 100%;
	}
	.content-section.tab-2.active  {
		display: block;
		width: 100%;
		height: 100%;
	}
	
	section {
	  display:block;
	  padding: 1rem 1rem;
	  max-width: 100%;
	  margin: 1rem;
	  color: black;
	}
	
	section h1 {
		color: aqua;
		font-size: 2.1rem;
		margin-bottom: 10px;
		margin-top: 15px;
		font-weight: 700;
		line-height: 1.3;
	}
	section h2 {
		color: var(--altdark);
		font-size: 2rem;
		margin-bottom: 5px;
		margin-top: 10px;
		font-weight: 500;
		line-height: 1.2;
	}
	section h3 {
		color: var(--primary);
		font-size: 1.7rem;
		margin-bottom: 5px;
		margin-top: 5px;
		font-weight: 500;
		line-height: 1.1;
	}
	
	section strong {
		color: var(--altdark);
		font-weight: 500;
	}
	
	.clientspartners .content-section {
		color: var(--altdark);
	}
	
	.clientspartners .content-section label	 {
		margin-top: 5px;
	}

	.clientspartners .content-section a {
		height: 200px;
	}
	
	.clientspartners .content-section a img {
		width: 100%;
		height: 100%;
		background: black;
	}
	
	.link-list {
		margin-top: 5px;
	}
	
	.link-list a,
	button.link-btn {
		border-radius: 10px;
		border: 1px solid var(--secondary);
		padding: 2px 10px;
	}
	
	a.link-left {
		float: left;
		border-radius: 10px;
		border: 1px solid var(--secondary);
		padding: 2px 10px;
		margin: 1rem;
	}
	
	a.link-right {
		float: right;
		border-radius: 10px;
		border: 1px solid var(--secondary);
		padding: 2px 10px;
		margin: 1rem;
	}
	
	.link-btn,
	a.link-btn {
		border-radius: 10px;
		border: 1px solid var(--secondary);
		/* padding: 2px 10px; */
		padding: 10px 20px;
		margin: 2rem;
		font-size: 1rem;
	}
	
	footer {
		font-size: 1rem;
		color: var(--altlight);
	}
	
	body[class] footer .footer{
		background: var(--secondary);
		color: var(--primary);
	}

    .intro {
      text-align: center;
      max-width: 800px;
      margin: auto;
    }

    .values {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1rem;
      margin-top: 1rem;
    }

    .value-card {
      background: var(--altlight);
      padding: 2rem;
      border-radius: 12px;
      text-align: center;
	  font-size: 1.8rem;
    }

    .value-card i {
      font-size: 1.2rem;
      color: var(--primary);
      margin-bottom: 1rem;
    }
	.value-card p {
	  font-size: 1.2rem;
	  margin-bottom: 1rem;
	}

    .founders {
      display: flex;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1rem;
      margin-top: 1rem;
    }

    .founder-card {
      background: var(--altlight);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 10px 25px rgba(0,0,0,0.08);
	  width: 25%;
    }

    .founder-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .founder-content {
      padding: 1rem;
    }

    .founder-content h3 {
      margin-bottom: 0.2rem;
      font-weight: 500;
    }

    .founder-content span {
      color: var(--altdark);
      font-size: 0.8rem;
      font-weight: bold;
    }

    .founder-content p {
      margin-top: 0.7rem;
      font-size: 0.9rem;
    }
	
	.slot-row.cta {
		background: var(--primary);
		border-radius:10px;
	}
	
	.slot-row.cta h2 {
		max-width: 30%;
		clear: right;
		float: left;
		font-weight: 500;
	}
	
	.slot-row.cta p {
		max-width: 40%;
		float: left;
	}
	
	.slot-row.cta div,
	.slot-row.cta .link-list {
		max-width: 30%;
		float: right;
		font-weight: 500;
	}
	
	.slot-row.cta div a:hover,
	.slot-row.cta .link-list a:hover {
		background: var(--secondary);
		color: var(--altlight);
		border-color: var(--secondary);
		font-weight: 500;
	}
	
	.slot-row.cta.client-cta div a:hover,
	.slot-row.cta.client-cta .link-list a:hover {
		background: var(--primary);
		color: var(--altlight);
		border-color: var(--secondary);
		font-weight: 500;
	}
	
	.slot-row.footer {
		max-height: 8%;
	}
	

  /* small screens: stack panels vertically, shrink header slots */
  @media (max-width:900px){
    /* .panels{flex-direction:column; gap:16px; width: calc(100% - 48px); height: 45%} */
	.panels {
		width: calc(100% - 48px);
		height: 45%;
		margin-top: -45%;
		flex-direction: row;
		gap: 1rem;
	}
    .bar .slot-row{
		padding:0 8px;
		display: flex;
	}
    .bar{padding:10px}
    .bar .slot{padding:6px 8px; flex: 1 1 0;}
    header.bar {overflow:visible;}
    header.bar .slot-row, footer.bar .slot-row{align-items:center}
	
	.main-overlay {
	  position: relative;
    }
	
	footer.bar .slot-row {
		display: block;
		letter-spacing: 0;
	} 
	
	footer.bar .slot-row .slot {
		margin: 5px 0px;
	} 
	
	#h-left, #h-right {
		background-size: contain;
	}
	
	#h-center {
		width: auto;
		min-width: 10%;
		color: #fff;
		position: relative;
	}

	header.bar .slot.center {
		text-align: center;
		max-width: 22% !important;
	}
	
	.hamburger {
	  width: auto;
	  height: 24px;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  cursor: pointer;
	  z-index: 200;
	  padding: 4px;
	  margin: 0 25%;
    }
	
	.hamburger span {
	  height: 3px;
	  width: 100%;
	  background: var(--primary);
	  border-radius: 3px;
	  transition: 0.3s ease;
    }
	
	.hamburger.active {
	  width: 34px;
	  height: 30px;
	}
	
	/* animate to X */
	.hamburger.active span:nth-child(1) {
	  transform: translateY(10px) rotate(45deg);
	}
	.hamburger.active span:nth-child(2) {
	  opacity: 0;
	}
	.hamburger.active span:nth-child(3) {
	  transform: translateY(-10px) rotate(-45deg);
	}
	
	.menu {
	  position: absolute;
	  top: 48px;
	  left: -100%;
	  transform: translateX(-50%);
	  backdrop-filter: blur(10px);
	  border-radius: 12px;
	  padding: 14px 0;
	  border: 1px solid rgba(255,255,255,0.15);
	  flex-direction: column;
	  min-width: 160px;
	  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
	  z-index: 300;
	  display: none;
	}
	
	.menu a {
	  padding: 10px 18px;
	  color: var(--altlight);
	  text-decoration: none;
	}

	/* show menu when active */
	.menu.open {
	  display: flex;
	}
	
	.bg-video {
	  object-fit:cover;
	}
	
	.content-section {
		padding-bottom: 10rem;
	}
	
	section {
      margin-top: 5rem;
	}
	
	.founders {
		display: block;
		margin-top: 1rem;
		margin-bottom: 1rem;
	}
	
	.founder-card {
	  width: 100%;
	  margin-top: 2rem;
    }
	
	.slot-row.cta h2 {
		max-width: 100%;
		clear: unset;
		float: unset;
	}
	
	.slot-row.cta p {
		max-width: 100%;
		float: unset;
	}
	
	slot-row.cta div, 
	.slot-row.cta .link-list {
		max-width: 100%;
		float: unset;
	}
	
	.link-btn, a.link-btn {
		margin: 0;
	}
	
	.link-list {
		margin-top: 22px;
	}
  }

  /* very small: compress */
  @media (max-width:420px){
    .bar .slot {padding:1px 6px; flex: 1 1 0;}
    .panels {
		width: calc(100% - 28px);
		margin-top: -45%;
		flex-direction: row;
	}
    a.panel { min-height:220px }
	
	header.bar .slot.center {
		text-align: center;
		max-width: 12% !important;
	}
	
	.hamburger {
	  margin: 0 0%;
    }
	
	.slot-row.cta h2 {
		max-width: 100%;
		clear: unset;
		float: unset;
	}
	
	.slot-row.cta p {
		max-width: 100%;
		float: unset;
	}
	
	slot-row.cta div, 
	.slot-row.cta .link-list {
		max-width: 100%;
		float: unset;
	}
	
	.link-btn, a.link-btn {
		margin: 0;
	}
	
	.link-list {
		margin-top: 22px;
	}
	
	footer {
		font-size: 0.7rem;
	}
  }
  
 /*  <style>
    * {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      font-family: sans-serif;
      background: var(--secondary);
    }
	  
	body {
	  display: flex;
      flex-direction: column;
      min-height: 100vh;
      font-family: sans-serif;
	}
	  
	.main {
	  flex: 1;
	  width: 100%;
      margin: 0;
      padding: 0 10%;
      font-family: sans-serif;
      background: var(--secondary);
	  z-index: 1;
	  position: relative;
	  min-height: 50%;
    }

    video {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -1;
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 2rem;
      background: rgba(0, 0, 0, 0.7);
      color: aqua;
      position: relative;
      z-index: 10;
    }

    .logo {
      width: 500px;
	  height: 150px;
    }
	 
	.logo-globe {
	  display: inline-block;
      width: 40%;
	  height: 150px;
	  background-size: contain;
	  background-repeat: no-repeat;
	  background-position: left center;
	  background-image: url('Images/SargNet-Logo-Globe.png');
    }
	 
	.logo-text {
	  display: inline-block;
      width: 40%;
	  height: 150px;
	  background-size: contain;
	  background-repeat: no-repeat;
	  background-position: left center;
	  background-image: url('Images/SargNet-Logo-Text.png');
    }

    nav {
      display: flex;
      gap: 1.5rem;
    }

    nav a {
      color: aqua;
      text-decoration: none;
      font-weight: 500;
    }

    .hamburger {
      display: none;
      flex-direction: column;
      cursor: pointer;
      gap: 5px;
    }

    .hamburger div {
      width: 25px;
      height: 3px;
      background: aqua;
    }

    .nav-mobile {
      display: none;
      flex-direction: column;
      background: rgba(0, 0, 0, 0.8);
      position: absolute;
      top: 100%;
      right: 0;
      padding: 1rem 2rem;
    }

    .nav-mobile a {
      padding: 0.5rem 0;
      color: aqua;
      text-decoration: none;
    }

    footer {
      display: flex;
      justify-content: space-between;
      padding: 2rem;
	  padding-top: 0;
      background: rgba(0, 0, 0, 1);
      color: aqua;
      position: relative;
      z-index: 10;
      flex-wrap: wrap;
	  margin-top: -4%;
    }

    .footer-column {
      flex: 1;
      min-width: 200px;
      margin: 1rem 0;
    }
	  
	.column-left {
      text-align: left;
    }
	  
	.column-center {
      text-align: center;
    }
	  
	.column-right {
      text-align: right;
    }
	 
	a {
		color: aqua !important;
		text-decoration: dotted !important;
	}
	a:hover {
		color: white !important;
		text-decoration: dotted !important;
	}*/

    /* Responsive */
/*    @media (max-width: 768px) {
	  
	   header {
		   padding-top: 0;
		   padding-bottom: 0;
	   }
		
	   .logo {
		  width: 500px;
		  height: 150px;
		}

		.logo-globe {
		  width: 30%;
		}

		.logo-text {
		  width: 45%;
		}
		
      nav {
        display: none;
      }

      .hamburger {
        display: flex;
		color: aqua;
      }

      .nav-mobile.active {
        display: flex;
      }
		
	.main {
      padding: 0;
	  display: table;
	  width: 100%;
	  height: auto;
    }

      footer {
        flex-direction: column;
        align-items: flex-start;
		margin-top: -5%;
		padding: 4rem;
		padding-top: 0;
		position: initial;
      }

      .footer-column {
        width: 100%;
      }
		
		.column-left {
		  text-align: center;
		  width: 100%;
		}

		.column-center {
		  text-align: center;
		  width: 100%;
		}

		.column-right {
		  text-align: center;
		  width: 100%;
		}
    }
	  
        .logo-grid {
		   position: relative;
		   display: grid;
		   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		   gap: 2rem;
		   max-width: 100%;
		   min-height: 100%;
		   margin: 0 auto;
		   background-size: cover;
		   background-repeat: no-repeat;
		   background-position: left center;
		   background-image: url(Images/SargTigerFur-Dark.jpg);
		   background-color: rgba(202, 250, 254, 0.7) !important;
		   background-blend-mode: lighten;
        }

        .logo-item {
		  display: flex;	  
          flex-direction: column;
          align-items: center;
          background: white;
		  margin: 2%;
          padding: 1rem;
          border-radius: 8px;
          box-shadow: 0 2px 5px rgba(0,0,0,0.1);
          transition: transform 0.2s;
		  width: 20%;
          height: min-content;
        }

       .logo-item:hover {
         transform: scale(1.03);
       }

       .logo-image {
         max-width: 100%;
         height: auto;
         object-fit: contain;
         margin-bottom: 0.5rem;
       }

       .logo-title {
         text-align: center;
         font-size: 0.95rem;
         font-weight: 800;
         color: #333;
       }
	  
	  @media (max-width: 768px) {
		  
		    .logo-item {
			  display: flex;	  
			  flex-direction: column;
			  align-items: center;
			  background: white;
			  margin: 10%;
			  padding: 1rem;
			  border-radius: 8px;
			  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
			  transition: transform 0.2s;
			  width: 80%;
			  height: min-content;
			}
	  }
  </style>*/